<template>
      <div class="main-left" >
        <div class="left-image">
          <el-image :src="usrClassify.picUrl"  ></el-image>
        </div>
        <div class="left-body" v-for="item in usrClassify.categoryList" :key="item.id" @click="goclassification(item.id,correntid)">
          <div class="body-header">
            <p>{{ item.name }}</p>
          </div>
          <div class="body-content">
            <div class="content" v-for="cate in item.categoryList" :key="cate.id" >
              <img :src="cate.wapBannerUrl" alt="">
              <p>{{ cate.name }}</p>
            </div>
          </div>
        </div>
      </div>
</template>

<script setup lang="ts">
// 导入store
import {usrClassifyInfo} from '@/stores/classify'
import {onMounted,ref,watch} from "vue"
import { useRouter} from 'vue-router'
const router = useRouter()
// 取出数据
const usrClassify = usrClassifyInfo()
const props = defineProps(['correntid'])


// 去商品列表
const goclassification = (subCategoryId:number,categoryId:number)=>{
  console.log(subCategoryId,categoryId);
  
  router.push({
    path:'/classification',
    query:{
      subCategoryId,
      categoryId
    }
  })
}

</script>

<style lang="less" scoped>
.main-left{
  padding: 15px 15px;
  flex: 1;
  margin-left: 80px;
}
.main-left .left-image img{
  width: 100%;
  height: 96px;
}
/* 右下展示区
 */
 .left-body .body-header{
  margin: 15px 0;
  border-bottom:  1px solid #ccc;
 }
 .left-body .body-header p{
  font-size: 14px;
  font-weight:bolder;
  padding-bottom: 5px;
 }

.left-body .body-content{
  display: flex;
  flex-wrap:wrap;
}

.left-body .body-content .content{
  display: flex;
  flex-direction: column;
  margin:4px;
  width: 30%; 
}
.left-body .body-content .content img{
  margin:0 auto;
  width: 80%;
  
}
.left-body .body-content .content p{
  text-align: center;
  /* // line-height: 30px; */
  margin-bottom: 30px;
}
</style>